<template>
  <div class="feedback" style="height: 100%;width:100%">
    <!-- <h3 class="title"><span class="back" @click="back"></span>处置</h3> -->
    <div class="mou_gary">
      <el-collapse v-model="activeName">
        <el-collapse-item title="报警生成" name="1">
          <div v-if="alarmList.length==0" class="no-data">暂无数据</div>
          <div v-for="(item,index) in alarmList" :key="index" class="detail_selt">
            <ul>
              <li>
                <span>报警时间</span>
                {{item.monitortime}}
              <li>
                <span>窨井类型</span>
                {{item.sCode}}
              </li>
              <li>
                <span>报警位置</span>
               {{item.devicepos}}
              </li>
              <li>
                <span>报警类型</span>
                {{item.monitorlevel}}
              </li>
              <li>
                <span>实时值</span>
                {{item.monitorvalue}}
              </li>
              <li>
                <span>审核人</span>
                {{item.reviewpers}}
              </li>
              <li>
                <span>反馈状态</span>
                {{item.isfeedback}}
              </li>
            </ul>

          </div>
        </el-collapse-item>
        <el-collapse-item title="报警分析" name="2">
          <div v-if="analysisList.length==0" class="no-data">暂无数据</div>
          <div v-for="(item,index) in analysisList" :key="index" class="detail_selt">
            <div class="page-box" v-if="analysisList.length>1">{{index+1}}</div>
            <ul>
              <li>
                <span>值守人</span>
                {{item.resperson}}
              <li>
                <span>值守负责人</span>
                {{item.unattendpeople}}
              </li>
              <li>
                <span>意见分析</span>
                {{item.analysopinon}}
              </li>
              <li>
                <span>分析时间</span>
                {{item.analystime}}
              </li>
              <li>
                <span>附件</span>
                <div class="img-box" v-if="item.urls"  >
            <div class="icon-po" v-for="(item1, index1) in item.urls.split(',')" :key="index1"  @click="preview(item.urls,item1)">
              <img class="image" :src="getimage(item1)" v-if="item1" />
            </div>
          </div>
              </li>
            </ul>

          </div>
        </el-collapse-item>
        <el-collapse-item title="报警审核" name="3">
          <div v-if="examineList.length==0" class="no-data">暂无数据</div>
          <div v-for="(item,index) in examineList" :key="index" class="detail_selt">
            <div class="page-box" v-if="examineList.length>1">{{index+1}}</div>
            <ul>
              <li>
                <span>审核结果</span>
                {{item.prejudgment}}
              <li>
                <span>审核人</span>
                {{item.reviewpers}}
              </li>
              <li>
                <span>审核意见</span>
                {{item.reviewopi}}
              </li>
              <li>
                <span>初步判断</span>
                {{item.sendflag}}
              </li>
              <li>
                <span>审核时间</span>
                {{item.reviewtime}}
              </li>
            </ul>

          </div>
        </el-collapse-item>
        <el-collapse-item title="阅读状态" name="4">
          <div v-if="list.length==0" class="no-data">暂无数据</div>
          <template v-if="list.length>0">
            <ul class="dot_infor" v-for="(item,index) in list" :key="index">
              <li>
                {{item.opereator}} <p class="dot">已读</p>
              </li>
              <li>
                {{item.readtime}}
              </li>
            </ul>
          </template>
        </el-collapse-item>

        <el-collapse-item title="报警反馈" name="5">
          <div v-if="feedbackList.length==0" class="no-data">暂无数据</div>
          <div v-for="(item,index) in feedbackList" :key="index" class="detail_selt">
            <div class="page-box" v-if="feedbackList.length>1">{{index+1}}</div>
            <ul>
              <li>
                <span>反馈人</span>
                {{item.feedbackpers}}
              <li>
                <span>报警反馈</span>
                {{item.feedback}}
              </li>
              <li>
                <span>反馈时间</span>
                {{item.feedbacktime}}
              </li>
            </ul>

          </div>
        </el-collapse-item>
        <el-collapse-item title="报警处置" name="6">
          <div v-if="disposeList.length==0" class="no-data">暂无数据</div>
          <processDisposal :list=disposeList></processDisposal>
        </el-collapse-item>

      </el-collapse>

    </div>
  </div>
</template>

<script>
  import config from "../http/config";
import { ImagePreview } from 'vant';
  import processDisposal from "./warningProcessDisposal";
  export default {
    components: {
      processDisposal
    },
    data() {
      return {
        alarmList: [],
        analysisList: [],
        examineList: [],
        feedbackList: [],
        disposeList: [],
        activeName: ["1"],
        list: [],
      };
    },
    methods: {
      back() {
        this.$router.go(-1);
      },
      preview(url, firstUrl) {
        var baseUrl=config.baseUrl + "alarmFlowController/getFtpFile/";
        let urls = [];
        urls.push(baseUrl+firstUrl)
        let keys = url.split(',');
        keys.forEach(item => {
          if (item && item != firstUrl) {
            urls.push(baseUrl+ item)
          }
        });
        ImagePreview(urls);
      },
      getimage(item) {
        let path = config.baseUrl + "alarmFlowController/getFtpFile/" + item
        return path;
      }
    },
    mounted() {
      var alarmId = this.$route.query.alarmId
      this.$api.reqApi.getProcess(alarmId).then(res => {
        if (res.code === "success") {
          this.alarmList = res.data[0];
          this.analysisList = res.data[1];
          this.examineList = res.data[2];
          this.feedbackList = res.data[3];
          this.disposeList = res.data[4];
          this.list = res.data[5];
        }
      })

    }
  };
</script>

<style scope lang="stylus">
  .el-collapse-item {
    margin: 0.2rem 0 0.2rem 0;
  }

  .el-collapse-item__header {
    padding: 0 0.2rem 0 0.2rem !important;
    font-weight: 800;
  }

  .el-icon-arrow-right:before {
    background-color: #EDEDED;
    border-radius: 50%;
  }

  .el-collapse-item__wrap {
    background-color: #F5F6FA;
  }

  .el-collapse-item__content {
    margin: 0 0.25rem 0.25rem 0.25rem;
    padding-bottom: 0rem;
  }
</style>
<style lang="stylus">
  .dot_infor {
    margin-top: 0.3rem;
    background: #fff;
    height: 1.02rem;
    box-shadow: 0 7px 10px 0px rgba(157, 168, 177, 0.3);
    border-radius: 7px;
    padding: 0.2rem;

    li {
      display: flex;
      justify-content: space-between;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
      
    

      .dot {
        color: #81C26B;
      }
    }
  }

  .no-data {
    text-align: center;
    padding-top: .2rem;
    color: #838383;

  }
</style>